<!DOCTYPE html>
<html lang="en">
<head>
    <th:block th:include="include :: header('停车位信息')" />
    <style>
        h5{
            width: 160px;
            display: inline;
        }
        .form-select{
            width: 100px;
            display: inline;
        }
        .container{
            margin-bottom: 100px;
        }
    </style>
</head>
<body>
<h3 class="text-center">停车位信息</h3><br/>
<div class="container">
    <div class="text-center">
        <h5>楼号</h5>&nbsp;&nbsp;
        <select class="form-select" aria-label="Default select example" id="buildingNo">
            <option selected>全部</option>
            <option value="1">1号</option>
            <option value="2">2号</option>
            <option value="3">3号</option>
        </select>&nbsp;&nbsp;
        <h5>房号</h5>&nbsp;&nbsp;
        <select class="form-select" aria-label="Default select example" id="roomNo">
            <option selected>全部</option>
            <option value="1">0101</option>
            <option value="2">0102</option>
            <option value="3">0201</option>
            <option value="3">0202</option>
            <option value="3">0301</option>
            <option value="3">0302</option>
            <option value="3">0401</option>
            <option value="3">0402</option>
            <option value="3">0501</option>
            <option value="3">0502</option>
            <option value="3">0601</option>
            <option value="3">0602</option>
            <option value="3">0701</option>
            <option value="3">0702</option>
        </select>&nbsp;&nbsp;
        <button type="button" class="btn btn-primary" onclick="clickConfirm()">确认</button>
    </div><br/>

    <table class="table table-hover align-middle">
        <thead style="background-color: azure">
        <tr>
            <th scope="col">停车位编号</th>
            <th scope="col">楼号</th>
            <th scope="col">房号</th>
            <th scope="col">车牌号</th>
            <th scope="col">停车费用</th>
            <th scope="col">购入日期</th>
        </tr>
        </thead>
        <tbody id="tbody">
        <tr th:each="parking:${parkingInfo}">
            <td th:text="${parking.getParkingNo().trim()}"></td>
            <td th:text="${parking.getBuildingNo().trim()}"></td>
            <td th:text="${parking.getRoomNo().trim()}"></td>
            <td th:text="${parking.getCarNum().trim()}"></td>
            <td th:text="${parking.getParkingFee().trim()}"></td>
            <td th:text="${parking.getBuyDate().trim()}"></td>
        </tr>
        </tbody>
    </table>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script>
    $(function () {
        $.get("/queryInfo/residentInfo/buildingNoAndRoomNo",function (data){
            let buildingNo = data.buildingNo;
            let roomNo = data.roomNo;
            $("#buildingNo").empty();//清空下拉框
            let  buildingNoSelect = "<option selected>全部</option>";
            $("#buildingNo").append(buildingNoSelect);
            $.each(buildingNo,function (i) {
                buildingNoSelect = "<option>"+buildingNo[i].trim()+"</option>"
                $("#buildingNo").append(buildingNoSelect);
            })
            $("#roomNo").empty();//清空下拉框
            let  roomNoSelect = "<option selected>全部</option>";
            $("#roomNo").append(roomNoSelect);
            $.each(roomNo,function (i) {
                roomNoSelect = "<option>"+roomNo[i].trim()+"</option>"
                $("#roomNo").append(roomNoSelect);
            })
        })
    })
    clickConfirm = function (){
        $.get("/queryInfo/parkingSpaceInfo/condition",
            {
                buildingNo:$("#buildingNo option:selected").text(),
                roomNo:$("#roomNo option:selected").text(),
            },
            function (data,status){
                $("#tbody").empty();//清空表格
                $.each(data,function (i) {
                    let  tbody = "<tr><td>"+data[i].parkingNo+"</td>"
                        +"<td>"+data[i].buildingNo.trim()+"</td>"
                        +"<td>"+data[i].roomNo.trim()+"</td>"
                        +"<td>"+data[i].carNum.trim()+"</td>"
                        +"<td>"+data[i].parkingFee.trim()+"</td>"
                        +"<td>"+data[i].buyDate.trim()+"</td>";
                    $("#tbody").append(tbody);
                })
            })
    }
</script>
</body>
</html>